<template>
<PublicPage pageName="管理常用规格" :borderType="true" :showNav="true">
  <view class="layout_box">
    <scroll-view class="layout_con_box" scroll-y="true" -webkit-overflow-scrolling="touch" scroll-with-animation="true">
      <ul class="specs_list_ul">
        <li class="specs_list_li" v-for="(specs, specsIndex) in systemspecList" :key="specsIndex">
          <div class="specs_msg_t">
            <span>{{specs.specName}}</span>
            <div class="btn_list">
              <i class="iconfont icon-delete fz-22" v-if="specs.specType!=0" @click.stop="deleteSpecsFn(specs,specsIndex)"></i>
              <!-- <button class="btn_box" v-if="specs.specType!=0" hover-class='hover' @click.stop="deleteSpecsFn(specs,specsIndex)">删除</button> -->
              <!-- <button class="btn_box" hover-class='hover' @click.stop="editSpecFn(specs, specsIndex)">修改</button> -->
            </div>
          </div>
          <div class="specs_msg_b">
            <span v-for="(goodsSpec, goodsSpecIndex) in specs.goodsSpecValuesVOList" :key="goodsSpecIndex">{{goodsSpec.specValue}}<i>/</i></span>
          </div>
        </li>
      </ul>
    </scroll-view>
    <div class="layout_msg_boxbtn_box">
      <button class="submit_box" hover-class='hover' @click.stop="goAddSpecsFn">添加规格类型</button>
    </div>
    <!-- 添加规格弹窗 -->
    <div class="fixed_box" v-if="classifyTypeShow">
      <div class="publicPopup_box">
        <div class="public_msg_box">
          <div class="public_titName_box">编辑规格类型</div>
          <div class="public_input_box"><input class="input_box" type="text" maxlength="10" v-model.trim="specName" placeholder="请输入规格类型名称(限10个字)"></div>
        </div>
        <div class="btn_list_box">
          <button class="btn_box btn_box_l" hover-class='hover' @click.stop="classifyTypeShow=false">取消</button>
          <button class="btn_box btn_box_r" hover-class='hover' @click.stop="submitSpecsFn">保存</button>
        </div>
      </div>
    </div>
    <!-- 添加规格弹窗 -->
  </view>
</PublicPage>
</template>
<script>
import PublicPage from "@/components/publicPage/index.vue";
import goodsApi from "@/api/goods.js"
export default {
  components: {PublicPage},
  computed: {
    systemspecList () {
      console.log(this.$store.state.systemspecList,'this.$store.state.systemspecListthis.$store.state.systemspecList')
      return this.$store.state.systemspecList
    }
  },
  data () {
    return {
      operateData: {},
      classifyTypeShow: false,
      specName: ""
    }
  },
  methods: {
    submitSpecsFn () {
      let this_ = this
      if (!this_.operateData.specName) {
        return wx.showToast({
          icon: 'none',
          mask: true,
          title: '请输入规格类型名称!'
        })
      }
      let data = {
        goodsUpdateSpecVO: {
          specName: this_.specName,
          id: this_.operateData.id,
        }
      }
      goodsApi.goodsSpec(data).then(async (res_) => {
        if (res_.code == 200) {
          let arr = this_.$store.state.systemspecList
          arr[this_.operateData.index] = {
            ...arr[this_.operateData.index],
            specName: this_.specName
          }
          this_.$store.commit('SYSTEM_SPEC_LIST', arr)
        }
        this.classifyTypeShow = false
      })
    },
    editSpecFn (data,index) {
      this.operateData = {
        ...data,
        index: index
      }
      this.specName = ''
      this.specName = this.operateData.specName
      this.classifyTypeShow = true
    },
    deleteSpecsFn (data, index) {
      this.operateData = {
        ...data,
        index: index
      }
      let this_ = this
      wx.showModal({
        title: '提示',
        content: '确定删除该规格类型吗？',
        success (res) {
          if (res.confirm) {
            console.log('用户点击确定')
            let data = {
              goodsDeleteSpecVO: {
                specId: this_.operateData.id,
              }
            }
            goodsApi.goodsSpec(data).then(async (res_) => {
              if (res_.code == 200) {
                let arr = this_.$store.state.systemspecList
                arr.splice(this_.operateData.index, 1)
                this_.$store.commit('SYSTEM_SPEC_LIST', arr)
              }
            })
          } else if (res.cancel) {
            console.log('用户点击取消')
          }
        }
      })
    },
    goAddSpecsFn () {
      this.navigateTo({ url: '/pagesA/libraryGoods/addSpecs' })
    },
  }
}
</script>
<style lang="scss" scoped>
.layout_box {
  width: 100vw;
  height: 100%;
  background-color: #F2F3F5;
  .layout_con_box {
    width: 100%;
    height: calc(100% - 98rpx) !important;
  }
  .specs_list_ul {
    background-color: #fff;
    .specs_list_li {
      padding: 16rpx 32rpx;
      font-size: 32rpx;
      border-bottom: 2rpx solid #eee;
      .specs_msg_t {
        display: flex;
        justify-content: space-between;
        margin-bottom: 16rpx;
        .btn_list {
          display: flex;
          justify-content: center;
          align-items: center;
          .btn_box {
            display: flex;
            padding: 8rpx 16rpx;
            font-size: 24rpx;
            color: rgba(0,0,0,0.90);
            line-height: 32rpx;
            font-weight: 400;
            justify-content: center;
            align-items: center;
            border: 2rpx solid #dcdee0;
            border-radius: 4rpx;
            margin-right: 20rpx;
            &:last-child {
              margin-right: 0rpx;
            }
          }
        }
      }
      .specs_msg_b {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        span {
          display: flex;
          font-size: 28rpx;
          justify-content: center;
          align-items: center;
          font-weight: 400;
          color: rgba(0,0,0,0.60);
          line-height: 40rpx;
          &:last-child {
            i {
              opacity: 0;
            }
          }
        }
      }
    }
  }
  .layout_msg_boxbtn_box {
    width: 100%;
    background-color: #fff;
    .submit_box {
      width: 100%;
      height: 96rpx;
      background: #e44435;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 32rpx;
      font-weight: 400;
      color: #fff;
      border-radius: 0;
    }
  }
}
</style>